<template>
  <div @dragover.prevent @drop.stop.prevent class="upload-container center-flex">
    <div class="title-wrap">
      <h1>临时图床</h1>
      <div class="list-entry">
        <h3 class="pointer" @click="toList">图片瀑布流</h3>
      </div>
    </div>

    <div @dragover.prevent="isOver = true" @dragend.prevent="isOver = false" @dragleave="isOver = false" @drop.stop.prevent="drop" class="upload-content" :class="{'is-over': isOver}">
      <div @click="upload" class="full center-flex">
        <h2>拖拽或点击上传图片</h2>
      </div>
      <div @click="preview" class="current-img" v-if="src" :style="{'background-image': `url(${src})`}">
        <span @click.stop="src = ''" class="close">&times;</span>
      </div>
    </div>
  </div>
</template>

<script>
import uploader from 'kuan-utils/lib/uploader'
import axios from 'axios'

import photoSwipe from 'kuan-vue-photoswipe'

function getExtension(name = '', md5) {
  if (!name.includes('.')) return md5
  return md5 + name.substr(name.lastIndexOf('.'))
}

export default {
  data() {
    return {
      src: '',
      token: '',
      domain: '',
      isOver: false
    }
  },
  methods: {
    toList() {
      this.$router.push({
        name: 'uploadList'
      })
    },
    async upload() {
      const { file, md5 } = await uploader.getFile()
      this.toUpload(file, md5)
    },
    async drop(e) {
      this.isOver = false
      const { files } = e.dataTransfer
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const md5 = await uploader.getFileMD5(file)
        await this.toUpload(file, md5)
      }
    },
    async toUpload(file, md5) {
      const key = getExtension(file.name, md5)
      if (!/(png|jpg|jpeg|gif|svg|ico)$/i.test(key)) return this.$toast('仅支持上传图片')

      if (!this.token) {
        const { token, domain } = await this.$http({
          url: '/api/upload/token'
        })
        this.token = token
        this.domain = domain
      }
      const { token, domain } = this

      const fd = new FormData()
      fd.append('file', file)
      fd.append('token', token)
      fd.append('key', key)
      fd.append('fname', file.name)

      const { status, data } = await axios({
        url: '//upload.qiniup.com/',
        method: 'post',
        data: fd
      })
      if (status !== 200) return this.$toast('上传失败')
      this.src = domain + key
      return this.src
    },
    preview() {
      photoSwipe.preview(this.src)
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #333;
  flex-direction: column;
  user-select: none;
  .upload-content {
    position: relative;
    height: 350px;
    max-width: 90%;
    width: 500px;
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 0 10px 2px #eee;
    &.is-over {
      box-shadow: 0 0 5px 1px #eee;
      border: 3px dotted #999;
    }
  }
  .current-img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    .close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 30px;
      padding: 10px;
    }
  }
}
.title-wrap {
  color: white;
  padding-bottom: 20px;
  text-align: center;
  width: 100%;
  .list-entry {
    color: white;
    max-width: 500px;
    width: 90%;
    padding-top: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    .pointer:hover {
      text-decoration: underline;
    }
  }
}
</style>
